<!-- 微信登录 图标 组件 -->
<template>
	<!-- 微信 qq登录 -->
	<view class="flex align-center justify-between px-5 py-3">
		<!-- #ifdef APP-PLUS -->
		<!-- 微信 -->
		<view
			class="flex flex-1 flex-column align-center justify-center"
			v-for="(item, index) in providerList"
			:key="index"
			v-if="item.name !== ''"
			@click="loginItem(item)"
		>
			<view
				:class="item.icon + ' ' + item.bgColor"
				class="iconfont font-lg text-white flex align-center justify-center rounded-circle"
				style="width: 100rpx; height: 100rpx"
			></view>
			{{ item.name }}
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<button type="primary" open-type="getUserInfo" @getuserinfo="mpGetUserInfo">微信登录</button>
		<!-- #endif -->
	</view>
</template>

<script>
import { log } from 'util';
	export default {
		props: {
			back: {
				// 返回上一页，判断
				type: Boolean,
				default: false, // 默认不返回
			},
		},
		data() {
			return {
				providerList: [],
			};
		},
		mounted() {
			// 如果是 手机，调用 获取供应商
			// #ifdef APP-PLUS
			this.getLoginAuth()
			// #endif
			
		},
		methods: {
			// 获取供应商
			getLoginAuth(){
				uni.getProvider({
					service: 'oauth',
					success: (result) => {
						// console.log('获取运营商', result.provider.length);
						this.providerList = result.provider.map((value) => {
							let providerName = '';
							let icon = '';
							let bgColor = '';
							switch (value) {
								case 'weixin':
									providerName = '微信';
									icon = 'icon-weixin';
									bgColor = 'bg-success';
									break;
								case 'qq':
									providerName = 'QQ';
									icon = 'icon-QQ';
									bgColor = 'bg-primary';
									break;
								case 'sinaweibo':
									providerName = '新浪';
									icon = 'icon-xinlangweibo';
									bgColor = 'bg-danger';
									break;
								case 'google':
									providerName = 'Google';
									icon = 'icon-fenxiang';
									bgColor = 'bg-warning';
									break;
							}
							return {
								name: providerName,
								id: value,
								icon: icon,
								bgColor: bgColor,
							};
						});
					},
					fail: (error) => {
						console.log('获取登录通道失败', error);
					},
				});
			},
			// 第三方登录
			loginItem(item) {
				// 登录
				uni.login({
					provider: item.id, // 授权登录服务商
					// 登录成功
					success: (res) => {
						// console.log(res);
						//获取用户信息 (官方提供的)
						uni.getUserInfo({
							provider: item.id, // 授权登录服务商
							success: (infoRes) => {
								let obj = {
									provider: item.id, //第三方登录
									openid: infoRes.userInfo.openId ? infoRes.userInfo.openId : infoRes.userInfo.idstr, //用户id，新浪微博没有openid这里做判断
									expires_in: 0, // 失效时间,0就代表永久
									nickName: infoRes.userInfo.nickName, // 昵称
									avatarUrl: infoRes.userInfo.avatarUrl, // 头像
								};
								console.log(infoRes.userInfo);
								// console.log(infoRes.userInfo);
								// 调用 登录接口，传入 获取到的参数
								this.loginEvent(obj);
							},
						});
					},
					// 失败
					fail: () => {
						uni.showToast({
							title: '登录失败',
							icon: 'none',
						});
					},
				});
			},
			// 第三方  登录接口
			loginEvent(data) {
				this.$H.post('/user/otherlogin', data).then((res) => {
					// console.log(res);
					/* 修改 vuex 的state 登录状态,持久化存储，用户信息
					   调用util.js工具 userinfo用户信息 格式转换 方法 */
					this.$store.commit('login', this.$U.formatUserinfo(res));
					// 提示消息 和跳转页面
					uni.showToast({
						title: '登录成功',
						icon: 'none',
					});
					// 在 login.vue组件，登录页，配置 back
					// 判断是否配置了 back, 返回上一页
					if (this.back) {
						uni.navigateBack({
							delta: 1,
						});
					}
				});
			},
			// 如果是微信小程序 登录
			// #ifdef MP-WEIXIN
			// 登录逻辑
			mpGetUserInfo(result){
				uni.showLoading({
					title:'登录中...',
					mask:true
				})
				// 获取失败
				if (result.detail.errMsg !== 'getUserInfo:ok') {
					uni.hideLoading();
					uni.showModal({
						title: '获取用户信息失败',
						content: '错误原因' + result.detail.errMsg,
						showCancel: false
					});
					return;
				}
				// 获取成功，逻辑
				let userinfo = result.detail.userInfo;
				uni.login({
					// 微信小程序，直接写微信
					provider:"weixin", // 授权登录服务商
					success: (res) => {
						console.log(res);
						// this.MpLogin({
						// 	url:"/wxlogin",
						// 	code:res.code,
						// 	nickName:userinfo.nickName,
						// 	avatarUrl:userinfo.avatarUrl
						// })
					},// 不论成功失败，都走
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			// #endif
			MpLogin(options){
				this.$H.post(options.url,{
					code:options.code,
					nickName:options.nickName, // 用户名
					avatarUrl:options.avatarUrl // 用户头像
				}).then(data=>{
					// let [err2,res2] = data
					// if(!this.$H.errorCheck(err2,res2)){
					// 	return false
					// }
				    if(Array.isArray(data) && data.length == 0){
						uni.showToast({
							title: '登录失败，请检查后端的微信小程序登录配置',
							icon: 'none'
						});
					return 
					}
					// 登录成功 保存状态(储存token)
					// 修改vuex的state,持久化存储
					this.$store.commit('login',this.$U.formatUserinfo(data))              
					// 本地存储
					// 连接 socket
					
					// 返回上一页
					if(this.back){
						uni.navigateBack({
							delta: 1
						});
					}
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
					// 登录成功，重新加载数据
				}).catch(err=>{
					log(err)
					return
				})
			},
		},
	};
</script>

<style></style>
